<template>
    <ContentField>
        <div class="row justify-content-md-center">
       <div class="col-3">
        <form @submit.prevent="register">
           <div class="mb-3">
              <label for="username" class="form-label">用户名</label>
              <input v-model="username" type="text" class="form-control" id="username" placeholder="请输入用户名">
           </div>
           <div class="mb-3">
              <label for="password" class="form-label">密码</label>
              <input v-model="password" type="password" class="form-control" id="Password" placeholder="请输入密码">
            </div>

            <div class="mb-3">
              <label for="confirmedPassword" class="form-label">确认密码</label>
              <input v-model="confirmedPassword" type="password" class="form-control" id="confirmedPassword" placeholder="请再次输入密码">
            </div>
            <div class="error-message">{{ error_massage }}</div>
  
         <button type="submit" class="btn btn-primary">提交</button>
         </form>
       </div>
    </div>
  </ContentField>
   
</template>

<script>
import ContentField from '@/components/ContentField.vue'
import { useStore } from 'vuex'
import { ref } from 'vue'
import $ from 'jquery'
import router from '@/router'

export default{
    components:{
         ContentField
    },
    setup(){
        const store= useStore();
        
        let username=ref('');
        let password=ref('');
        let confirmedPassword=ref('');
        let error_massage=ref('');

   const register = () => {
     $.ajax({
       url:"http://127.0.0.1:3000/user/account/register/",
       type:"post",

       data:{
        username:username.value,
        password:password.value,
        confirmedPassword:confirmedPassword.value,
       },
       headers:{
          Authorization:"Bearer "+ store.state.user.token,
       },
       success(resp){
        console.log(resp);
        if(resp.error_massage==="成功"){
            router.push({name:"user_account_login"});
           
         }else{
            error_massage.value=resp.error_massage;
         }
       },
      });       
   }
     return {
            username,
            password,
            confirmedPassword,
            error_massage,
            register,
            }
    }
}
</script>


<style scoped>

   button{
    width: 100%;
   }
   div.error-message{
    color: red;
   }
</style>